<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-3.2.1.min.js"></script>
		 
		<script>
			$(function(){
				$("#addNew").click(function(){
				 	var n=window.prompt("输入一个新品种");
				 	$("#f ul").append("<li>"+n+"</li>");
				 });
				  $("#f ul li").hover(function(){
				  		$(this).css({"font-size":"20px","color":"red"});
				  },function(){
				  		$(this).css({"font-size":"14px","color":"black"});
				  });
				  $("#removeCss").click(function(){
				  	 $("#f li").unbind();
				  });
				  
			});
		</script>
	</head>
	<body>
		<div id="f" >
			<h2>常见的水果有</h2>
			<ul>
				<li>苹果</li>
				<li>榴莲</li>
				<li>葡萄</li>
				<li>梨子</li>
				<li>李子</li>
				<li>栗子</li>
				<li>香蕉</li>
				<li>龙眼</li>
				<li>菠萝</li>
				<li>橙子</li>
				<li><a href="https://www.taobao.com">萝卜</a></li>
				
			</ul>
		</div>
		<input type="button" value="增加新水果" id="addNew"/>
		
		<input type="button" value="去掉效果" id="removeCss"/>
	</body>
</html>
